<template>
  <j-modal
    :title="title"
    :width="600"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    @close="close"
    cancelText="关闭"
  >
    <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
      <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" :model="model">
        <a-form-model-item label="人员类型" prop="type">
          <!--          <j-dict-select-tag
                      placeholder="请选择人员类型"
                      style="width: 100%"
                      v-model="model.type"
                      dict-code="zyusertype"
                      :disabled="disableSubmit"
                      @change="selectType"
                    />-->
          <j-dict-select-tag
            placeholder="请选择人员类型"
            style="width: 100%"
            v-model="model.type"
            dict-code="zyusertype"
            :disabled="disableSubmit"
          />
        </a-form-model-item>
        <a-form-model-item label="角色" prop="roleName">
          <a-select
            v-model="model.roleName"
            placeholder="请选择角色"
            :disabled="disableSubmit"
            @change="selectRole"
          >
            <a-select-option v-for='(item,index) in roleList' :key='item.id' :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="机构" prop="deptId">
          <j-select-depart
            v-model="model.deptId"
            :trigger-change="true"
            customReturnField="id"
            :multi="false"
            @change="selectDep"
          ></j-select-depart>
        </a-form-model-item>
        <a-form-model-item label="人员信息" prop="userId">
          <!--          <a-tree-select
                      placeholder="请先选择人员类型"
                      style="width: 100%"
                      v-model="model.userId"
                      :tree-data="treeData"
                      :disabled="disableSubmit"
                      @change="selectUser"
                    />-->
          <a-select
            show-search
            placeholder="请先选择人员类型"
            style="width: 100%"
            v-model="model.userId"
            :disabled="disableSubmit"
            :filter-option="(input, option) => option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0"
          >
            <a-select-option v-for='(item,index) in treeData' :key='item.key' :value="item.key">
              {{item.title}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="权限" prop="permissArr">
          <!-- <a-form-model-item v-if="model.type==='innerusers'" label="权限" prop="permissArr"> -->
          <a-tree-select
            :show-search="true"
            tree-node-filter-prop="title"
            v-model="model.rolesInfo"
            style="width: 100%"
            :tree-data="permissTree"
            tree-checkable
            :disabled="disableSubmit"
            :maxTagCount="5"
            :replaceFields="{children:'children', title:'roleName', key:'id', value: 'id' }"
          />
        </a-form-model-item>


      </a-form-model>
    </div>
    <!-- table区域-end -->
  </j-modal>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'

export default {
  name: 'SysPositionModal',
  props: ['id'],
  components: {},
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      disableSubmit: false,
      title: '机构信息',
      visible: false,
      isCheck: false,
      model: {},
      roleList: [],
      treeData: [],
      permissTree: [],
      url: {
        role: '/sjxmzygl/sjWorkUsers/queryMemberRoleType',
        user: '/sjxmzygl/sjWorkUsers/getMemberTreeList',
        add: '/sjxmzygl/sjWorkUsers/add',
        edit: '/sjxmzygl/sjWorkUsers/edit',
        tree: '/common/memberRoleCommon/getAllMemberRole',
        queryUserByDepId: '/sys/user/queryUserByDepId',
        queryRolePowerById: '/sys/role/queryRolePowerById'
      },
      rules: {
        userId: [{ required: true, message: '请选择' }],
        deptId: [{ required: true, message: '请选择' }],
        roleName: [{ required: true, message: '请选择' }],
        type: [{ required: true, message: '请选择' }]
      }
    }
  },
  created() {
    this.getRoleList()
    this.loadTree()
  },
  watch: {},
  methods: {
    selectType() {
      this.getUserTree()
      this.model.userId = ''
      this.model.rolesInfo = []
    },

    selectUser(value, label, extra) {
      console.log(extra.triggerNode._props.dataRef.type)
      if (extra.triggerNode._props.dataRef.type === '5') {
      } else {
        this.model.userId = ''
        this.$message.error('请选择人员！！！')
      }
    },

    selectRole(value, label, extra) {
      console.info('🚀 ~ line:143 -----', this.model.roleName)
      this.model.rolesInfo = []
      getAction(this.url.queryRolePowerById, { id: this.model.roleName }).then((res) => {
        if (res.success) {
          if (res.result || res.result.power) {
            this.model.rolesInfo = res.result.power.split(',')
          } else {
            this.$message.error('获取角色权限异常，请联系管理员')
          }
        } else {
          this.$message.error('获取角色权限异常，请联系管理员')
        }
      })
    },

    selectDep() {
      this.model.userId = ''
      this.getUserTree()
    },

    loadTree() {
      this.permissTree = []
      getAction(this.url.tree).then((res) => {
        if (res.success) {
          this.permissTree = res.result
        }
      })
    },
    check(record) {
      this.model = Object.assign({}, record)
      if (this.model.rolesInfo) {
        this.model.rolesInfo = this.model.rolesInfo.split(',')
      }
      this.treeData = []
      this.getUserTree()
      this.visible = true
    },
    add() {
      this.model = { userId: '', deptId: '', rolesInfo: [] }
      // this.getUserTree()
      this.treeData = []
      this.visible = true
    },
    edit(record) {
      this.model = Object.assign({}, record)
      if (this.model.rolesInfo) {
        this.model.rolesInfo = this.model.rolesInfo.split(',')
      } else {
        this.model.rolesInfo = []
      }
      this.treeData = []
      this.getUserTree()
      this.visible = true
    },
    getRoleList() {
      getAction(this.url.role).then((res) => {
        if (res.success && res.result.length > 0) {
          this.roleList = res.result
        } else {
          console.log(res)
        }
      })
    },
    getUserTree() {
      getAction(this.url.queryUserByDepId, { id: this.model.deptId }).then((res) => {
        if (res.success) {
          this.treeData = res.result.map((item) => {
            return {
              title: item.realname,
              key: item.id,
              value: item.id
            }
          })
        } else {
          this.$message.error(res.message)
        }
      })
      /*getAction(this.url.user, { type: this.model.type }).then((res) => {
        if (res.success) {
          // if (res.success && res.result.length > 0) {
          this.treeData = res.result
        } else {
          console.log(res)
        }
      })*/
    },
    close(isSubmit) {
      if (isSubmit) {
        this.saveData()
      } else {
        this.visible = false
      }
    },
    saveData() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let url, type
          if (!this.model.id) {
            url = this.url.add
            type = 'post'
          } else {
            url = this.url.edit
            type = 'put'
          }
          this.model.rolesInfo = this.model.rolesInfo.toString()
          httpAction(url, { proId: this.id, ...this.model }, type).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok')
              this.visible = false
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../../css/checkForm.less';

.name-type {
  width: 110px;
  margin-left: 5px;
  border: 1px solid #e0e0e0;

  /deep/ .ant-select-selection {
    box-sizing: border-box;
    min-height: 27px !important;

    .ant-select-selection__rendered {
      line-height: 27px !important;
    }
  }
}
</style>
